<!doctype html>
<html lang="en">
	<head>
		<title>Face Tracker</title>
		<meta charset="utf-8">
		<style>
			@import url(https://fonts.googleapis.com/css?family=Lato:300italic,700italic,300,700);

			body {
				font-family: 'Lato';
				background-color: #f0f0f0;
				margin: 0px auto;
				max-width: 1150px;
			}

			#overlay {
				position: absolute;
				top: 0px;
				left: 0px;
			}

			#container {
				position : relative;
				width : 700px;
				height : 500px;
				/*margin : 0px auto;*/
			}

			#content {
				margin-top : 70px;
				margin-left : 100px;
				margin-right : 100px;
				max-width: 950px;
			}

			#convergence {
				display : inline;
			}

			h2 {
				font-weight : 400;
			}

			.btn {
				font-family: 'Lato';
				font-size: 16px;
			}

			.hide {
				display : none;
			}
		</style>
		<script type="text/javascript">
			var _gaq = _gaq || [];
			_gaq.push(['_setAccount', 'UA-32642923-1']);
			_gaq.push(['_trackPageview']);

			(function() {
				var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
				ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
				var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
			})();
		</script>
	</head>
	<body>
		<script src="./js/libs/utils.js"></script>
		<script src="./js/libs/dat.gui.min.js"></script>
		<script src="../build/clmtrackr.js"></script>
		<script src="./js/libs/Stats.js"></script>

		<link rel="stylesheet" type="text/css" href="./styles/imgareaselect-default.css" />
		<script src="./js/libs/jquery.min.js"></script>
		<script src="./js/libs/jquery.imgareaselect.pack.js"></script>

		<div id="content">
			<h2>Face tracking in images</h2>
			<div id="container">
				<canvas id="image" width="625" height="500"></canvas>
				<canvas id="overlay" width="625" height="500"></canvas>
			</div>
			<br/>
			<input type="button" class="btn" value="start" onclick="animateClean()"></input>
			<input type="button" class="btn" value="manually select face" onclick="selectBox()"></input>
			<input type="file" class="btn" id="files" name="files[]" />
			<p id="convergence"></p>
			<div id="text">
				<p>This is an example of precise face-tracking in an image using the javascript library <a href="https://github.com/auduno/clmtrackr"><em>clmtrackr</em></a>. To try it out, simply click start.</p>
				<span id="loadimagetext"><p>To try it out with your own image, choose a file above by clicking "choose file". If the tracking has problems, try selecting the face in the image manually by clicking "manually select face", and click and hold to drag a square around the face in the image.</p></span>
			</div>
			<p>The image is from the <a href="http://www-prima.inrialpes.fr/FGnet/data/01-TalkingFace/talking_face.html">FG-net Talking Face</a> project</p>
			<a href="https://github.com/auduno/clmtrackr"><img style="position: absolute; top: 0; left: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_left_green_007200.png" alt="Fork me on GitHub"></a>

			<script>
				var cc = document.getElementById('image').getContext('2d');
				var overlay = document.getElementById('overlay');
				var overlayCC = overlay.getContext('2d');

				var img = new Image();
				img.onload = function() {
					cc.drawImage(img,0,0,625, 500);
				};
				img.src = './media/franck_02159.jpg';

				var ctrack = new clm.tracker({stopOnConvergence : true});
				ctrack.init();

				stats = new Stats();
				stats.domElement.style.position = 'absolute';
				stats.domElement.style.top = '0px';
				document.getElementById('container').appendChild( stats.domElement );

				var drawRequest;

				function animateClean() {
					ctrack.start(document.getElementById('image'));
					drawLoop();
				}

				function animate(box) {
					ctrack.start(document.getElementById('image'), box);
					drawLoop();
				}

				function drawLoop() {
					drawRequest = requestAnimFrame(drawLoop);
					overlayCC.clearRect(0, 0, 720, 576);
					if (ctrack.getCurrentPosition()) {
						ctrack.draw(overlay);
					}
				}

				// detect if tracker fails to find a face
				document.addEventListener("clmtrackrNotFound", function(event) {
					ctrack.stop();
					alert("The tracking had problems with finding a face in this image. Try selecting the face in the image manually.")
				}, false);

				// detect if tracker loses tracking of face
				document.addEventListener("clmtrackrLost", function(event) {
					ctrack.stop();
					alert("The tracking had problems converging on a face in this image. Try selecting the face in the image manually.")
				}, false);

				// detect if tracker has converged
				document.addEventListener("clmtrackrConverged", function(event) {
					document.getElementById('convergence').innerHTML = "CONVERGED";
					document.getElementById('convergence').style.backgroundColor = "#00FF00";
					// stop drawloop
					cancelRequestAnimFrame(drawRequest);
				}, false);

				// update stats on iteration
				document.addEventListener("clmtrackrIteration", function(event) {
					stats.update();
				}, false);

				// manual selection of faces (with jquery imgareaselect plugin)
				function selectBox() {
					overlayCC.clearRect(0, 0, 720, 576);
					document.getElementById('convergence').innerHTML = "";
					ctrack.reset();
					$('#overlay').addClass('hide');
					$('#image').imgAreaSelect({
						handles : true,
						onSelectEnd : function(img, selection) {
							// create box
							var box = [selection.x1, selection.y1, selection.width, selection.height];

							// do fitting
							animate(box);
							$('#overlay').removeClass('hide');
						},
						autoHide : true
					});
				}

				// function to start showing images
				function loadImage() {
					if (fileList.indexOf(fileIndex) < 0) {
						var reader = new FileReader();
						reader.onload = (function(theFile) {
							return function(e) {
								// check if positions already exist in storage

								// Render thumbnail.
								var canvas = document.getElementById('image')
								var cc = canvas.getContext('2d');
								var img = new Image();
								img.onload = function() {
									if (img.height > 500 || img.width > 700) {
										var rel = img.height/img.width;
										var neww = 700;
										var newh = neww*rel;
										if (newh > 500) {
											newh = 500;
											neww = newh/rel;
										}
										canvas.setAttribute('width', neww);
										canvas.setAttribute('height', newh);
										cc.drawImage(img,0,0,neww, newh);
									} else {
										canvas.setAttribute('width', img.width);
										canvas.setAttribute('height', img.height);
										cc.drawImage(img,0,0,img.width, img.height);
									}
								}
								img.src = e.target.result;
							};
						})(fileList[fileIndex]);
						reader.readAsDataURL(fileList[fileIndex]);
						overlayCC.clearRect(0, 0, 720, 576);
						document.getElementById('convergence').innerHTML = "";
						ctrack.reset();
					}

				}

				// set up file selector and variables to hold selections
				var fileList, fileIndex;
				if (window.File && window.FileReader && window.FileList) {
					function handleFileSelect(evt) {
						var files = evt.target.files;
						fileList = [];
						for (var i = 0;i < files.length;i++) {
							if (!files[i].type.match('image.*')) {
								continue;
							}
							fileList.push(files[i]);
						}
						if (files.length > 0) {
							fileIndex = 0;
						}

						loadImage();
					}
					document.getElementById('files').addEventListener('change', handleFileSelect, false);
				} else {
					$('#files').addClass("hide");
					$('#loadimagetext').addClass("hide");
				}
			</script>
		</div>
	</body>
</html>
